.mainContainer {
  background-color: var(--theme-bg-primary);
  color: white;
  font-family: sans-serif;
  height: 100vh;
  position: relative;
  overflow: hidden; // 防止整个容器滚动
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  text-align: center;
  padding: 16px 16px 0 16px; // 去掉下padding
  font-size: 20px;
  background-color: var(--theme-bg-primary);
  // 添加安全区域支持
  padding-top: calc(16px + env(safe-area-inset-top));
  height: calc(32px + env(safe-area-inset-top));
  // 确保在移动端正确显示
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  display: flex;
  align-items: center;
  justify-content: center;
  
  h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--theme-text-primary);
  }
}

.searchWrapper {
  position: fixed;
  top: calc(43px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 99;
  background-color: var(--theme-bg-primary);
  padding: 16px 16px 16px 16px; // 确保所有方向都有padding
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid var(--theme-bg-secondary);
  // 确保在移动端正确显示
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  min-height: 60px; // 最小高度而不是固定高度
}

.searchBar {
  background-color: var(--theme-bg-input) !important;
  border-radius: 100px !important;
  
  :global {
    .adm-search-bar {
      background-color: var(--theme-bg-input) !important;
      background: var(--theme-bg-input) !important;
      border-radius: 100px !important;
    }
    
    .adm-search-bar-active {
      background-color: var(--theme-bg-input) !important;
      background: var(--theme-bg-input) !important;
      border-radius: 100px !important;
    }
    
    .adm-search-bar-input-box {
      background-color: var(--theme-bg-input) !important;
      background: var(--theme-bg-input) !important;
      border-radius: 100px !important;
    }
    
    .adm-input-element {
      color: var(--theme-text-primary) !important;
      background-color: transparent !important;
      background: transparent !important;
      
      &::placeholder {
        color: var(--theme-text-muted) !important;
      }
      
      &:focus {
        color: var(--theme-text-primary) !important;
        background-color: transparent !important;
        background: transparent !important;
      }
    }
    
    .adm-search-bar-cancel {
      color: var(--theme-text-primary) !important;
      font-size: 14px !important;
    }
    
    .adm-search-bar-cancel-button {
      color: var(--theme-text-primary) !important;
    }
    
    .adm-search-bar-clear {
      color: var(--theme-text-muted) !important;
    }
  }
}

.contentWrapper {
  position: absolute;
  top: calc(43px + env(safe-area-inset-top) + 92px); // header height + searchWrapper height
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  background-color: var(--theme-bg-primary);
  padding: 16px 16px 0 16px; // 顶部padding + 左右padding
  -webkit-overflow-scrolling: touch; // iOS平滑滚动
}

.cardList {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 100px; // 为footer预留更多空间
  background-color: transparent !important;
}
:global{
  .dark-theme .adm-pull-to-refresh{
    background-color: transparent !important;
  }
}
.loadingContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.loadingText {
  color: var(--theme-text-primary);
  font-size: 14px;
  opacity: 0.8;
}
